<template>
  <div class="pageBox">
    <div class="info pl15 pr15 mb30 flexBox flexBetween aiCenter">
      <div class="fs24 c-333">累计获得 <span class="c-main-1 fs26">{{ otherData.data.totalCheckinReward }}</span> 饭币奖励</div>
      <div class="fs24 rules" @click="showPopup = true">签到规则</div>
    </div>
    <van-calendar title="日历" :show-title="false" :show-mark="false" :poppable="false" :show-confirm="false"
      :style="{ paddingBottom: '15px' }" :min-date="currentMonthFirstDay" :max-date="currentMonthLastDay"
      @click-prev-month="handlePrevent" @click-next-month="handlePrevent" :formatter="formatterDate" />
    <div class="flexBox flexcenterX mt30 signInBox">
      <span class="signIn fs28 c-fff f600" @click="handleCheckin">立即签到</span>
    </div>
    <van-popup v-model:show="showPopup" position="bottom" round :style="{ height: '300px', maxHeight: '70%' }" closeable
      :close-on-click-overlay="false" @click-close-icon="closePopup">
      <div class="mt100 pl15 pr15">
        <ul>
          <li class="fs28 c-333">1. 每日仅可签到1次（24:00截止当日签到），签到后奖励<span
              class="c-main-1">10</span>饭币，自动实时发送到「我的-账户余额」，可即时用于下单抵扣。</li>
          <li class="fs28 c-333 mt10">2. 连续签到5天额外奖励<span class="c-f00"> 15 </span>饭币，连续签到10天额外奖励<span class="c-f00"> 30
            </span>饭币，连续签到15天额外奖励<span class="c-f00"> 50 </span>饭币；15天后连续天数重置，重新累计循环。</li>
          <li class="fs28 c-333 mt10">3. 连续签到天数未达标当日断签则重置为0，新用户注册当天即可参与首签，首签享同等基础奖励。</li>
          <li class="fs28 c-333 mt10">4. 签到饭币永久有效；若奖励未到账，可重新登录或联系客服处理。</li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script setup lang="ts">
import { checkin, checkinStat } from '@/api/user'
import { CheckinStat } from '@/types/userTypes'
import { showToast } from 'vant'
import { computed, onMounted, reactive, ref } from 'vue'

const showPopup = ref(false)
const otherData = reactive({
  data: {} as CheckinStat
})
const now = new Date()
const year = now.getFullYear()
const month = now.getMonth() // 0 1月，1 2月
// 计算当月第一天
const currentMonthFirstDay = computed(() => {
  return new Date(year, month, 1)
})

// 计算当月最后一天
const currentMonthLastDay = computed(() => {
  // 下个月的第0天即为当月最后一天
  return new Date(year, month + 1, 0)
})

const formatterDate = computed(() => {
  return (dayObj: any) => {
    const checkinDays = otherData.data.checkinDays?.split(',').map(Number) || []

    const isChecked = checkinDays.includes(dayObj.text)
    if (isChecked) {
      dayObj.bottomInfo = '签'
    } else {

      dayObj.bottomInfo = ''
    }
    return dayObj
  }
})

const handlePrevent = (e: Event) => {
  e.stopPropagation()
}

const closePopup = () => {
  showPopup.value = false
}

const handleCheckin = async () => {
  if (otherData.data.hasCheckedInToday) return showToast('今日已签到!')
  const { data } = await checkin()
  if (data.code === 0) {
    showToast('签到成功')
    getCheckinStat()
  }
}

const getCheckinStat = async () => {
  const { data } = await checkinStat()
  if (data.code === 0) {
    otherData.data = data.data
  }
}

onMounted(() => {
  getCheckinStat()
})
</script>

<style lang="scss" scoped>
.pageBox {
  background: #F7F7F7;
  padding-top: 15px;
  padding-bottom: 15px;

  .info {
    .rules {
      color: #40a9ff;
      border: 1px solid #40a9ff;
      border-radius: 50px;
      padding: 2px 15px;
    }
  }

  .signInBox {
    .signIn {
      padding: 15px 60px;
      border-radius: 50px;
      background: #40a9ff;
    }
  }

  :deep(.van-calendar__bottom-info) {
    bottom: 15px !important;
    font-size: 22px !important;
  }
}
</style>